<template>
  <!-- 组件根标签 -->
  <div class="editinfo">
    <!-- <h2>编辑页面</h2> -->
    <!-- 头部栏 -->
    <hmnavbar
      :title="title"
      @back="toInfo"
      @save="saveINfo"
      :hassave="value !== user[prop]"
    ></hmnavbar>
    <!-- 输入框 -->
    <div class="myinput">
      <van-field class="ipt" v-model="value" v-if="prop !== 'avatar'" />
      <!-- 头像vant控件 -->
      <van-uploader
        v-else
        :after-read="afterRead"
        :before-read="beforeRead"
        v-model="fileList"
        :max-count="1"
        id="my-upload"
      />
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import { editUserinfo, uploadFile } from './../../../api/login'
export default {
  name: '',
  data () {
    return {
      baseURL: process.env.VUE_APP_BaseURL,
      value: '',
      title: '', // 上面返回栏的标题
      prop: '', // 储存,页面传过来的参数
      fileList: [] // 上传的头像的预览数组
    }
  },

  // 一进入页面,就拿到路由的参数
  created () {
    // 拿到传递过来的参数
    this.prop = this.$route.query.protoype
    // console.log(this.prop)

    if (this.prop === 'nickname') {
      this.title = '修改昵称啊'
    } else if (this.prop === 'intro') {
      //   console.log('这次是修改简介页面的')
      this.title = '修改个人简介'
    } else if (this.prop === 'position') {
      //   console.log('这次是修改岗位页')
      this.title = '修改岗位'
    } else if (this.prop === 'avatar') {
      //   console.log('这次是修改头像页')
      this.title = '修改头像'
      // 给存放头像的数组添加对象
      this.fileList.push({
        url: this.baseURL + this.user.avatar
      })
    }

    // 给输入框双向绑定,用户的真实数据
    this.value = this.user[this.prop]
  },

  methods: {
    ...mapActions(['setUserinfo']),

    // 头像上传vant的方法
    // 图片选好前
    beforeRead (file) {
      console.log(file)
      const isType = file.type === 'image/png' || 'image/jpeg'
      const isSize = file.size / 1024 / 1024 < 2
      if (!isType) {
        this.$toast.fail('只接受jpg或png格式的图片呦')
      }
      if (!isSize) {
        this.$toast.fail('文件大小不能超过2M')
      }
      return isType && isSize
    },
    // 图片选好后
    async afterRead (file) {
      console.log(file)
      console.log('图片选择好了')
      // 请求发送上传图片
      const res = await uploadFile(file.file)
      console.log(res)
      // 把服务器返回来的图片数据的id存起
      // 用户修改接口规定根据文件的id来修改头像图片
      this.value = res.data.data[0].id
    },

    // 返回
    toInfo () {
      this.$router.back()
    },
    // 点击保存
    async saveINfo () {
      //   console.log('点击了保存按钮了')

      this.$toast({
        type: 'loading',
        message: '修改中....',
        duration: 0
      })

      //   if (this.prop === 'nickname') {
      //     // 修改数据
      //     await editUserinfo({ nickname: this.value })
      //   } else if (this.prop === 'intro') {
      //     // console.log('修改简介')
      //     // 修改数据
      //     await editUserinfo({ intro: this.value })
      //   }

      // 将上面的if-else-if再次简化,,这个是动态的设置对象的属性[]
      await editUserinfo({
        [this.prop]: this.value
      })

      // 重新获取用户数据并更新,使用硬射过来的actions中的setUserinfo方法
      this.setUserinfo()

      // 跳转回上一个页面 -- 从哪来的再跳回哪
      this.$router.back()
      // 清除加载提示弹出框
      this.$toast.clear()
    }
  },
  components: {},

  // 硬射state中的数据
  computed: {
    ...mapState(['user'])
  }
}
</script>
<style lang="less">
.editinfo {
  .myinput {
    padding: 15px;
    text-align: center;
    .van-uploader__upload {
      width: 200px;
      height: 200px;
    }
    .van-uploader__preview-image {
      width: 200px;
      height: 200px;
    }
    .ipt {
      background-color: #f6f4f5;
      border-radius: 6px;
    }
  }
}
</style>
